<template>
  <div class="content">
    <!-- <div class="enter" @click="enter"></div> -->
    <div class="industry">
      <div class="industry-row">
        <div class="industry-cards">
          <div class="industry-card">
            <p><span>纳入监管企业总数</span><span>69</span><span>家</span></p>
          </div>
          <div class="industry-card">
            <p><span>涉及</span><span>8</span><span>乡镇</span></p>
          </div>
          <div class="industry-card">
            <p><span>当日负荷总量</span><span>2235</span><span>kVar</span></p>
          </div>
          <div class="industry-card">
            <p><span>昨日用电量</span><span>32.79</span><span>%</span></p>
          </div>
        </div>
        <div class="industry-box industry-main-pie">
          <div><chart :options="chart1" auto-resize></chart></div>
          <div><chart :options="chart11" auto-resize></chart></div>
        </div>
      </div>
      <div class="industry-row">
        <div class="industry-box">
          <div class="industry-title">
            <p>交易企业总负荷曲线<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart2" :theme="chartTheme" auto-resize></chart>
        </div>
        <div class="industry-box">
          <div class="industry-title">
            <p>交易企业近15日用电总量<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart3" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'industryMain',
  data () {
    return {
      chartTheme: {},
      chart1: {
        color: ['#0024e4','#01c381','#4bf7ff','#acfbff','#2ba0ff','#0b4dff'],
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        title: {
          show: true,
          text: '分区域实时负荷分布图',
          left: 'center',
          textStyle: {
            color: '#fff',
          },
          top: 10,
        },
        legend: {
          show: false,
        },  
        series : [
          {
            name:'用电负荷',
            type:'pie',
            radius : ['20%', '60%'],
            center: ['50%', '60%'],
            data:[
              {value:435, name:'开发区黄湾镇'},
              {value:310, name:'尖山新区'},
              {value:274, name:'许村镇'},
              {value:235, name:'马桥街道'},
              {value:200, name:'长安镇(高新区)'},
              {value:200, name:'周王庙镇'},
              {value:235, name:'硖石街道'},
              {value:200, name:'斜桥镇'},
              {value:200, name:'袁花镇'},
              {value:200, name:'丁桥镇'},
              {value:235, name:'盐官镇'},
              {value:150, name:'海昌街道'},
              {value:120, name:'海洲街道'}
            ].sort(function (a, b) { return a.value - b.value; }),
            label: {
              normal: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#fff'
                },
                length: 10,
                length2: 60
              }
            },
            itemStyle: {
              normal: {
                shadowOffsetY: 4,               
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 166, .25)'
              }
            },
          }
        ]
      },
      chart11: {
        color: ['#0024e4','#01c381','#4bf7ff','#acfbff','#2ba0ff','#0b4dff'],
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        title: {
          show: true,
          text: '分行业实时负荷分布',
          left: 'center',
          textStyle: {
            color: '#fff',
          },
          top: 10,
        },
        legend: {
          show: false,
        },  
        series : [
          {
            name:'实时负荷',
            type:'pie',
            radius : '70%',
            center: ['50%', '60%'],
            data:[
              {value:435, name:'化学原料'},
              {value:310, name:'信息传输'},
              {value:274, name:'橡胶塑料制品'},
              {value:235, name:'用气机械和塑料制品'},
              {value:200, name:'纺织业'},
              {value:200, name:'通讯设备制造'}
            ].sort(function (a, b) { return a.value - b.value; }),
            label: {
              normal: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#fff'
                },
                length: 10,
                length2: 60
              }
            },
            itemStyle: {
              normal: {
                shadowOffsetY: 4,               
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 166, .25)'
              }
            },
          }
        ]
      },
      chart2: {
        color: ['#015caf'],
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            boundaryGap : false,
            data : ['1:00','1:05','1:10','1:15','1:20','1:25','1:30','1:35','1:40','1:45','1:50','1:55','2:00','2:05'],
          }
        ],
        yAxis : [
          {
            type : 'value',
          }
        ],
        series : [
          {
            name:'负荷',
            type:'line',
            stack: '总量',
            smooth: true,
            data:[120, 132, 101, 134, 90, 120, 150, 120, 132, 101, 134, 90, 120, 120],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 69, 222, .5)'
                }, {
                  offset: 1,
                  color: 'rgba(0, 100, 222, .3)'
                }])
              }
            },

          }
        ]
      },
      chart3: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['08-01', '08-02', '08-03', '08-04', '08-05', '08-06', '08-07','08-08', '08-09', '08-10', '08-11', '08-12', '08-13', '08-14', '08-15'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
          }
        ],
        series : [
          {
            name:'直接访问',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220, 100, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#01c381'},
                  {offset: 1, color: '#015caf'}
                ]),
              }
            }
          }
        ]
      }
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })

  },
  methods: {
    enter: function () {
      window.location.href="http://60.190.128.190:17898/quota/login/loginAction!loginFromAgency.action?sysUser.loginname=INIT_DEFAULT_USER_LOGINNAME&sysUser.password=123456"
    }
  }
}
</script>

<style scoped>
  @import '../../../style/industry.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
  .enter {
    margin: 0 auto;
    position: relative;
    top: -40px;
    height: 128px;
    width: 128px;
    background-image: url(~@/assets/enter.png);
    background-size: 128px 128px;
  }
</style>